<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- a,1 创建页面结构 -->
    <div id="app">
        <!-- a,3 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/product">详情页</router-link>
        <!-- a.4 路由的出口 -->
        <router-view></router-view>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    //a.5定义组件
    const Home = {
        template:`
        <div>
            <input type="text">
            <input type="text">
            <button>登录</button>
        </div>
        `,
    };
    const Product = {
        template:`
        <div>
            <h1>产品的详情页,如果没有登录,就进入这里</h1>
        </div>
        `
    };
    // a,6定义组件和路由的对应关系
    //注意点,routes 名字不能改
    const routes = [
        {
            path:"/",
            component: Home,
        },
        {
            path:"/login",
            component: Home,
        },
        {
            path:"/product",
            component: Product,
        }
    ];
    //a,7 
    //VueRouter 真正的跟路由
    let router = new VueRouter({
        routes,
    });
    //b,1 
    //sessionID
    let token = "";
    localStorage.setItem("token",token); //存到本地的localStorage 中
    //全局的导航守卫
    //b,2 
    //to 表示跳转到的地方
    //from 从那个地方跳转过来
    //next 函数
    //1,next() 表示可以跳转到下一个路由
    //2,next(false) 中断路由
    //3,next(path) 跳转到path
    //4, next(new Error(""))
    //补充
    // console.log() //输出打印
    // console.info() //信息输出
    // console.warn() //警告级别的
    // console.error() //错误级别
    // console.table({name:"张三",id:123}) //将对象以表格形式显示出来

    router.beforeEach((to,form,next) =>{
        let token = localStorage.getItem("token");
        console.log(to);
        //1,next() 可以继续下一个路由
        //2,next(false); //中断当前路由
        //next("/login"); //重定向到 /login 路径中
        //token 不为空 登录成功
        //如果localStorage里面有值 就那么就通过,可以执行下面的操作
        if(to.path === "/login" || token != "" ){
            next(); //如果点击的是登录界面 同时token 不为空那么就进入到下一层
            console.log("继续下一步")
        }else{
            next("/login");
            console.log('继续登录界面')
        }
    });
    //a,2 
    let vm = new Vue({
        //a.8 作为配置传到Vue 实例中
        router,
        el:"#app",
    });

</script>
</html>